<template>
    <div>
        <!-- 头部组件 -->
        <mt-index-header class="header"/>
        <!-- nav网格导航 -->
        <van-swipe class="my-swipe" duration="500" v-if="navlists">
            <van-swipe-item >
                <mt-navlist :data="navlist.slice(0,15)"/>
            </van-swipe-item>
            <van-swipe-item >
                <mt-navlist :data="navlist.slice(15,30)"/>
            </van-swipe-item>
            <van-swipe-item >
                <mt-navlist :data="navlist.slice(30,45)"/>
            </van-swipe-item>
        </van-swipe>
        <!-- 商家列表 -->
        <div class="mers" v-if="data">
            <merchant v-for="item in merchants" :key="item.mid" :data="item"/>
        </div>
    </div>
</template>

<script>
import MtIndexHeader from '@/components/MtIndexHeader.vue'
import MtNavlist from '@/components/MtNavlist.vue'
import Merchant from '@/components/Merchant.vue'
    export default {
        components: { MtIndexHeader,MtNavlist, Merchant},
        data() {
            return {
                navlists: null,//导航
                data:null //首页数据
            }
        },
        methods:{
            // 获取导航菜单
            getList(){
                const url ='v4/index/navlist'
                this.axios.get(url)
                .then(res =>this.navlists=res.data)
                .catch(err => console.log(err))
            },
            // 获取数据
            getData(){
                const url='v4/merchant/list?local=芝罘区'
                this.axios.get(url)
                .then(res => this.data=res.data)
                .catch(err => console.log(err))
            }
        },
        mounted(){
            this.getList()
            this.getData()
        },
        computed:{
            navlist(){
                return this.navlists.data
            },
            merchants(){
                return this.data.data
            }
        }
    }
</script>

<style lang="scss">
.header {
    position: fixed;
    z-index: 2;
    left: 0;right: 0;top: 0;
}
.my-swipe {
    margin-top: 48px;
    .van-swipe__indicator--active {
        background-color: #ffd101 !important;
    }
    .van-swipe__indicator {
        width: 8px;
        height: 8px;
        background-color: #ccc;
    }
}
.mers {
    background-color: #f4f4f4;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 50px;
}
</style>